<template>
	<view>
		<view>
			<!-- 左侧通讯录 -->
			<scroll-view class="scroll-container" scroll-y="true" :scroll-into-view="toView" @scroll="scrollLeftLocation"
				scroll-with-animation="true">
				<view class="name-text-view" style="margin-top: 20rpx;" @click="setBack()">全国</view>
				
				<view v-for="(item1, index1) in locationDataList" :key="index1" :id="item1.key">
					<view class="common-key-text">{{ item1.key }}</view>
					<view v-for="(item2, index2) in item1.value" :key="index2">
						<view @click="click_item(item2)">
							<view class="name-text-view">{{ item2.name }}</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 右侧字母导航条 -->
			<view class="letter-nav">
				<view :class="temp==index?'right-view-text-select':'right-view-text'"
					v-for="(item, index) in locationDataList" :key="index" @click="toSelectIndex(item.key,index)">
					{{item.key}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAddressEconomizeList
	} from '@/api/base.js'
	export default {
		data() {
			return {
				temp: 0,
				toView: '',
				commonLocation: [],
				locationDataList: [],
				users_id:'',
				topList:[]
			}
		},
		onLoad(option) {
			var that = this
			//获取省数据
			getAddressEconomizeList().then(res => {
				if (res.code == 0) {
					that.locationDataList = res.data
					that.$forceUpdate()
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})

		},
		onReady() {
			setTimeout(() => {
				this.getNodesInfo()
			}, 2000)
		},
		methods: {
			setBack(){
				var item = {}
				item.registration_province_id = ''
				item.registration_province = ''
				item.name = '全国'
				item.id = ''
				item.type = 'region'
				var pages = getCurrentPages()
				var prevPage = pages[pages.length - 2]
				prevPage.$vm.backData(item)
				uni.navigateBack({
					delta: 1
				})
			},
			getNodesInfo() {
				const query = uni.createSelectorQuery().in(this)
				query.selectAll('.common-key-text').boundingClientRect().exec(data => {
					let res = data[0];
					let rel = [];
					res.map(item => {
						rel.push(item.top);
					});
					this.topList = rel;
				});
			},
			scrollLeftLocation(e) {
				let scrollTop = e.target.scrollTop;
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop >= h1 && scrollTop < h2) {
						this.temp = i;
					}
				}
			},
			
			
			toSelectIndex(item, index) {
				this.toView = item
				this.temp = index
			},
			click_item(item) {
				this.Backhaul(item)
			},
			commonClick(item) {
				this.Backhaul(item)
			},
			Backhaul(obj){
				uni.navigateTo({
					url:'/pages/carSource/select/city?economize_id=' + obj.id + "&registration_province=" + obj.name +'&selectInta=' + this.selectInta
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.content-item-view{
		width: 134rpx;
		height: 54rpx;
		background: #F4F4F499;
		border-radius: 28rpx;
		text-align: center;
		margin-right: 20rpx;
	}
	
	.name-text {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 54rpx;
		color: #333333;
		opacity: 1;
	}
	
	.common-key-text {
		width: 100%;
		height: 58rpx;
		background: #1D212505;
		border-radius: 0rpx;
		line-height: 58rpx;
		padding-left: 28rpx;
	}

	.common-text-view {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.scroll-view-class {
		white-space: nowrap;
		background-color: white;
		height: auto;
	}

	.scroll-view-class-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.content-item-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.scroll-container {
		height: 100vh;
	}

	.letter-nav {
		position: fixed;
		right: 32rpx;
		top: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-view {
		width: 60rpx;
		height: auto;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 22rpx;
	}

	.common-text {
		font-size: 32rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #1C2125;
		opacity: 1;
	}

	

	.name-text-view {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #E6E6E6;
	}


	.pad28-8-6 {
		padding: 8rpx 0px 6rpx 28rpx;
	}

	.pad28 {
		padding: 22rpx 28rpx;
	}

	.margin28 {
		margin: 28rpx;
	}

	.bac-F4 {
		background-color: #F4F4F4;
	}

	.right-view-text {
		font-size: 32rpx;
		font-family: DIN Alternate;
		/* font-weight: bold; */
		color: #999999;
		padding: 8rpx 4rpx;
	}

	.right-view-text-select {
		font-size: 32rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #0E59EA;
		padding: 8rpx 4rpx;
	}
</style>